<template>
  <div class="main-header">
    <div class="left">
      <!-- 动态选择组件 -->
      <el-icon size="28px" @click="flodChange">
        <component :is="isFold ? 'Expand' : 'Fold'"></component>
      </el-icon>
      <!-- <el-icon><Expand /></el-icon>
        <el-icon><Fold /></el-icon> -->

      <el-breadcrumb separator-icon="ArrowRight">
        <el-breadcrumb-item
          v-for="item in breadItemArr"
          :key="item.path"
          :to="item.path ? `/main/${item.path}` : ''"
          >{{ item.menuItemName }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="right">
      <div class="icon">
        <el-icon size="28px"><Bell /></el-icon>
        <el-icon size="28px"><ChatLineRound /></el-icon>
        <el-badge is-dot class="item">
          <el-icon size="28px"><Postcard /></el-icon>
        </el-badge>
      </div>
      <div class="info">
        <el-avatar :size="35" :src="circleUrl" />
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ userStore.userInfoDetail?.username ? userStore.userInfoDetail.username : '用户名' }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item style="border-bottom: 1px solid #ccc" @click="handleLogout"
                ><el-icon><Bell /></el-icon>退出登录</el-dropdown-item
              >
              <el-dropdown-item @click="handleDialogShow"
                ><el-icon><ChatDotSquare /></el-icon>修改密码</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 修改密码 -->
    <EditDialog ref="dialogRef"></EditDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/store/userStore'
import { MyStorage } from '@/utils/utils'
import EditDialog from './main-header/EditDialog.vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const dialogRef = ref()
let emit = defineEmits(['foldChange'])

const isFold = ref(false) //控制折叠图标
// 默认显示头像
// const circleUrl = userStore.userInfoDetail?.avatar
//   ? `${import.meta.env.VITE_BASE_URL}upload/${userStore.userInfoDetail?.avatar}`
//   : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

const circleUrl = computed(() => {
  return userStore.userInfoDetail?.avatar
    ? `${import.meta.env.VITE_BASE_URL}upload/${userStore.userInfoDetail?.avatar}`
    : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
})

const breadItemArr = computed(() => {
  // 面包屑遍历生成
  let pathArr: any = []
  userStore.routesAsync.forEach((item: any) => {
    // 遍历所有的路径，只有匹配到当前页面的路由时候做处理操作
    if (item.meta && route.path.includes(item.path)) {
      pathArr.push({
        menuItemName: item.meta.menuItemName,
        path: item.path
      })
      item.children.forEach((child: any) => {
        // 内层循环遍历找出二级菜单名使用，也是跟当前路由进行匹配
        if (!child.redirect && route.path.includes(child.path)) {
          pathArr.push({
            menuItemName: child.meta.menuItemName
          })
        }
      })
    }
  })
  return pathArr
})

// 侧边栏状态切换
const flodChange = () => {
  // 触发的位置只能在这里，通过这里将状态传递出去使用判断
  isFold.value = !isFold.value
  // 触发自定义事件
  emit('foldChange', isFold.value)
}

// 退出登录
const handleLogout = () => {
  userStore.clearUserStore()

  if (!MyStorage.get('checkValueStorage')) {
    // 清除密码
    MyStorage.remove('username')
    MyStorage.remove('password')
    MyStorage.remove('checkValueStorage')
  }

  MyStorage.remove('token')
  ElMessage({
    message: '退出成功',
    type: 'success'
  })
  // 退出登录的时候恢复路由，否则上一个用户注册的路由信息还会存在，第二个没有权限的用户可以通过路径访问
  // router.removeRoute('main') 该方法会将父级路由和子路由一起删除，不利于处理

  //保留父级自身的内容
  let route = router.getRoutes().find((route) => route.name === 'main')
  //将路由表恢复初始信息
  route.children = [
    {
      path: '/main',
      redirect: '/main/intro'
    }
  ]
  //这里如果第一个超级用户登录后再退出，浏览器会路由进行缓存处理。而go(0)会直接刷新，清空缓存，保证第二个用户登录的时候
  //浏览器没有任何缓存信息。无特权的用户不能直接通过路由访问特权界面
  router.push('/login')
  router.go(0)
}

// 处理编辑用户信息弹窗显示
const handleDialogShow = () => {
  dialogRef.value.changeVisible()
}
</script>

<style lang="scss" scoped>
.main-header {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left {
  display: flex;
  align-items: center;

  .el-icon {
    margin-right: 5px;
    cursor: pointer;
  }

  :deep(.el-breadcrumb__inner) {
    font-size: 18px;
    &:hover {
      color: red;
    }
  }
}
.right {
  display: flex;
  align-items: center;
  .icon {
    display: flex;
    align-items: center;
    margin-right: 10px;
    .el-icon {
      padding: 0 5px;
      cursor: pointer;
    }
    .item {
      display: flex;
      align-items: center;
    }
  }

  .info {
    display: flex;
    align-items: center;
    .el-avatar {
      margin: 0 5px;
      cursor: pointer;
    }
    span {
      cursor: pointer;
    }
  }
}
.info {
  :global(.el-dropdown-menu__item) {
    line-height: 36px;
    padding: 6px 22px;
    font-size: 16px;
  }
}
</style>
